<template>
	<view class="pagesbg">
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.back(1)"></view>
				<view class="header-title">充值记录</view>
			</view> 
		</view> 
		
		<view class="">
			<view class="record">
				<view class="record-wrapper" v-if="isShowPage">
					<scroll-view scroll-y="true" class="record-height" 
					v-if="recordsList.length != 0"
					@scrolltolower="lower()">
						<view class="record-item record-balanceBg" v-for="(item,index) in recordsList" :key="index"
						>
							<view class="record-left">
							<view class="record-title">金额：</view>
							<view class="record-title">充值方式：</view>
							<view class="record-title">状态：</view>
							<view class="record-title">时间：</view>
							</view>
							<view class="record-right">
								<view class="record-title">{{ item.cnt }}</view>
								<view class="record-title">{{ getPayMethod(item.payMethod) }}</view>
								<view class="record-title record-status--orange" v-if="item.rechargeStatus == 1">审核中</view>
								<view class="record-title record-status--red" v-else-if="item.rechargeStatus == 3">充值失败({{ item.remark }})</view>
								<view class="record-title record-status--blue" v-else-if="item.rechargeStatus == 2">充值成功</view>
								<view class="record-title">{{ item.createTime }}</view>
							</view>
						</view>
					</scroll-view>
					<view class="initNoData" v-if="recordsList.length == 0">暂无记录</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				isShowPage: false,
				pages: 1,
				pageIndex: 1,
				pageSize: 20,
				recordsList: [],
			}
		},
		computed: {
			getPayMethod(){
				return function(type){
					switch (type){
						case 1:
							return '微信';
							break;
						case 0:
							return '支付宝';
							break;
						case 3:
							return '银行卡';
							break;
					}
				}
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.init();
		},
		onReachBottom() {
			console.log("ddd");
			if (this.pageIndex >= this.pages) {
				return this.$tools.toast('到底了');
			} else {
				this.pageIndex++;
				console.log("+++")
				this.getRechargeRecord();
			}
		},
		methods: {
			init(){
				this.isShowPage = false;
				this.pages = 1;
				this.pageIndex = 1;
				this.recordsList = [];
				this.getRechargeRecord();
			},
			// 充值记录
			getRechargeRecord(){
				var data = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					coinType: this.coinType,
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/money/rechargeRecord',data, res => {
						if(res.code == 200){
							this.isShowPage = true;
							this.pages = res.data.pages;
							this.recordsList = this.recordsList.concat(res.data.list);
							uni.hideLoading();
						}
					}, err => {
						uni.hideLoading();
					}, 'GET'
				);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.record{
		margin-top: 20rpx;
		&-title{
			margin-bottom: 20rpx;
		}
		&-right{
			width: 75%;
		}
	}
	
</style>